<!DOCTYPE html>
<html>

<head>
    <title>任务</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <link rel="stylesheet" href="#(ctx)/static/wechat/lib/weui.min.css">
    <link rel="stylesheet" href="#(ctx)/static/wechat/css/jquery-weui.css">
    <link rel="stylesheet" href="#(ctx)/static/wechat/css/reset.css">
    <link rel="stylesheet" href="#(ctx)/static/wechat/css/box-flex.css">
    <link rel="stylesheet" href="#(ctx)/static/wechat/css/style.css">
     <script src="#(ctx)/static/wechat/lib/jquery-2.1.4.js"></script>
    <script src="#(ctx)/static/wechat/js/adaptive.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    adaPtive(); //铺页面调用             
    //页面加载时调用
    $(function() { direction(); });
    //用户变化屏幕方向时调用
    $(window).on('orientationchange', function(e) { direction(); });
    //调用adaptive
    function adaPtive(max) {
        window['adaptive'].desinWidth = 720;
        window['adaptive'].baseFont = 24;
        window['adaptive'].scaleType = 1;
        window['adaptive'].maxWidth = max;
        window['adaptive'].init();
    }
    //判断手机屏幕方向
    function direction() { if (window.orientation == 90 || window.orientation == -90) { adaPtive(320); return false; } else if (window.orientation == 0 || window.orientation == 180) { adaPtive(); return false; } }
    </script>
</head>

<body ontouchstart style="background: #fff;">
    <div class="wx-header clearfix flex">
        <h1 class="flex-1">任务</h1>
        <div class="wx-header-right" id="showMoreLink">
            <i class="iconfont icon-jia"></i>
        </div>
    </div>
    <!--task-main -->
    <div class="weui-msg task-main clearfix">
		<div class="task-main-container clearfix">
			<ul class="task-ul">
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn on">领取</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>
				<li>
					<div class="task-img">
						<img src="#(ctx)/static/wechat/images/task_img.jpg" alt="">
					</div>
					<div class="task-name">
						<h1>战斗狂魔</h1>
						<p>今天共参加战斗100场</p>
						<div class="task-mana">
							<span>EXP X 300</span>
							<span>活跃 X 5</span>
						</div>						
					</div>
					<div class="task-button">
						<p>进度&nbsp;&nbsp;56/100</p>
						<a  class="task-btn">前往</a>
					</div>
				</li>

			</ul>
		</div>

    	<!-- moreLink -->
        <div class="moreLink">
            <ul class="morelink-ul">
                <li><a href=""><img src="#(ctx)/static/wechat/images/moreLink_msg.png" alt=""><p>发起群聊</p></a></li>
                <li><a href=""><img src="#(ctx)/static/wechat/images/moreLink_add.png" alt=""><p>添加朋友</p></a></li>
                <li><a href=""><img src="#(ctx)/static/wechat/images/moreLink_sys.png" alt=""><p>扫一扫</p></a></li>
                <li><a href=""><img src="#(ctx)/static/wechat/images/moreLink_pay.png" alt=""><p>收付款</p></a></li>
            </ul>
        </div>
        <!-- moreLink -->
    </div>
    <!--task-main -->
    <!--  weui-tabbar -->
    <div class="weui-tabbar">
        <a href="index.html" class="weui-tabbar__item">
            <!--   <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> -->
            <div class="weui-tabbar__icon wj">
                <img src="#(ctx)/static/wechat/images/tarbar_earth.png" alt="">
            </div>
            <p class="weui-tabbar__label">无界</p>
        </a>
        <a href="task.html" class="weui-tabbar__item  weui-bar__item--on">
            <div class="weui-tabbar__icon rw">
                <img src="#(ctx)/static/wechat/images/tarbar_rw_on.png" alt="">
            </div>
            <p class="weui-tabbar__label">任务</p>
        </a>
        <a href="info.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon zx">
                <img src="#(ctx)/static/wechat/images/tarbar_zx.png" alt="">
            </div>
            <p class="weui-tabbar__label">资讯</p>
        </a>
        <a href="me.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon me">
                <img src="#(ctx)/static/wechat/images/tarbar_me.png" alt="">
            </div>
            <p class="weui-tabbar__label">我</p>
        </a>
    </div>
    <!--  weui-tabbar -->
   
    <script src="#(ctx)/static/wechat/lib/fastclick.js"></script>
    <script>
    $(function() {
        FastClick.attach(document.body);
        $("#showMoreLink").on('click',function(){
            $(".moreLink").toggle("fast");
        })
    });
    </script>
    <script src="#(ctx)/static/wechat/js/jquery-weui.js"></script>
</body>

</html>
